<template>
    <div class="box">
        <pull-to :top-load-method="refresh">
            <ul class="scroll_box">
                <li v-for="one in content" class="clearfloat contentTable">
                    <div class="floatLeft img_box">
                        <img :src="one.img" alt="">
                    </div>
                    <div class="floatLeft content_box">
                        <h2>{{one.title}}</h2>
                        <p>{{one.info}}</p>
                    </div>
                </li>
            </ul>
        </pull-to>
    </div>
</template>

<script>
    import PullTo from 'vue-pull-to'
    import img from '../../../../assets/imgs/forVisitor/c++.jpg'
    export default {
        name: 'example',
        data() {
            return {
                content: [
                    {
                        title: 'c++的基础入门',
                        img,
                        info: 'c++++++++++++++++++++++++++++',
                        url: '#'
                    },
                    {
                        title: 'c++的基础入门',
                        img,
                        info: 'c++++++++++++++++++++++++++++',
                        url: '#'
                    }, {
                        title: 'c++的基础入门',
                        img,
                        info: 'c++++++++++++++++++++++++++++',
                        url: '#'
                    }, {
                        title: 'c++的基础入门',
                        img,
                        info: 'c++++++++++++++++++++++++++++',
                        url: '#'
                    }, {
                        title: 'c++的基础入门',
                        img,
                        info: 'c++++++++++++++++++++++++++++',
                        url: '#'
                    }, {
                        title: 'c++的基础入门',
                        img,
                        info: 'c++++++++++++++++++++++++++++',
                        url: '#'
                    }

                ],
            }
        },
        components: {
            PullTo
        },
        methods: {
            refresh(loaded) {
                setTimeout(() => {
                    this.content.unshift({
                        title: 'c++的基础入门',
                        img,
                        info: 'c++++++++++++++++++++++++++++啊啊啊啊啊啊啊啊啊啊啊啊阿啊啊啊',
                        url: '#'
                    },);
                    loaded('done');
                }, 1000);
            }
        }
    }
</script>
<style scoped>
    .box {
        position: absolute;
        width: 100%;
        top: 56px;
        bottom: 30px;
        overflow: hidden;
    }

    .contentTable {
        display: flex;
        justify-content: space-around;
    }

    .contentTable .img_box {
        width: 30%;
        padding: 5px;
    }

    .contentTable .img_box img {
        width: 90%;

    }

    .contentTable .content_box {
        width: 70%;
        text-align: left;
    }

    .contentTable .content_box h2 {
        font-weight: 600;
        font-size: 14px;
    }

    .contentTable .content_box p {
        font-size: 12px;
    }
</style>